<template>
  <div>
      <div class="topList-container">
        <div class="slider">
           <!-- <ul>
              <li v-for="item in list" :key="item.id" @click="go3(item.id)">
                  {{item.name}}
              </li>
           </ul> -->
           <ul>
              <li v-for="item in list" :key="item.id">
                  <!-- 
                      第一种写法
                       <RouterLink :to="'/topList?id='+item.id">{{item.name}}</RouterLink>
                      第二种写法
                      <router-link :to="`/topList?id=${item.id}`">{{item.name}}</router-link>
                      第三种写法
                      <router-link :to="{path:'/topList',query:{id:item.id}}">{{item.name}}</router-link>
                   -->
                   <router-link :to="{name:'topListName',query:{id:item.id}}">{{item.name}}</router-link>
              </li>
           </ul> 
        </div>
        <div class="main">
          <!-- 三级路由的出口 -->
          <router-view></router-view>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[
        {
          id:'1001',
          name:'飙歌榜'
        },
        {
          id:'1002',
          name:'新歌榜'
        },
        {
          id:'1003',
          name:'原创榜'
        },
        {
          id:'1004',
          name:'热歌榜'
        }
      ]
    }
  },
  methods:{
    //第一种写法
    go(id){
      this.$router.push('/toplist?id='+id)
    },
    go1(id){
      this.$router.push(`/toplist?id=${id}`)
    },
    go2(id){
      this.$router.push({
        path:'/toplist',
        query:{
          id
        }
      })
    },
    go3(id){
      this.$router.push({
        name:'topListName',
         query:{
          id
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
 .topList-container{
    display: flex;
    width: 100vw;
    height: 500px;
    .slider{
      display: flex;
      align-items: center;
      
      flex-direction: column;
      width: 120px;
      height: 100%;
      background-color: #ccc
    }
    .main{
    
      flex-grow: 1;
      height: 100%;
      background-color:pink;
    }
 }
</style>